import React from 'react'
import {Select, Spin} from '../../antd'
import Http from "../utils/http"
import PinYinUtils from "../utils/PinYinUtils"

const Option = Select.Option;

/**
 * 公司门店联动组件，支持公司多选
 * 也可单独使用，默认查所有门店
 * 引用说明：urlParams和apiUrl属性必传 如：urlParams={{appCode:'IMS'}},apiUrl={`${API_URL}`}
 */
class SiteCompanySelect extends React.Component {
    state = {
        data: [],
        value: undefined,
        filterData:undefined,
        fetching: false,
        apiUrl: this.props.apiUrl,
        urlParams: this.props.urlParams
    }

    handleChange = (value) => {
        this.setState({
            value:value,
            fetching: false
        });
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(value);
        }
    }

    linkage = (val) => {
        if (val) {
            const data = this.state.data;
            const filterData = [];
            if(data){
                data.map(s => {
                    //当公司为多选时
                    if(val instanceof Array){
                        if(val.indexOf(s.companycode) !== -1){
                            filterData.push(s);
                        }
                    }else{
                        if(val === s.companycode){
                            filterData.push(s);
                        }
                    }
                })
            }
            this.setState({
                filterData:filterData
            })
        }
    }

    componentWillReceiveProps(newProps){
        const {
            value
        } = newProps;
        this.setState({
            value:value,
        });
    }

    reset = () => {
        this.handleChange(null);
    }

    componentDidMount() {
        this.setState({fetching: true});
        Http.post({
            url: this.state.apiUrl+'map-center/skushop/findall',
            params: this.state.urlParams
        }).then(response => response.json())
            .then(rs => {
                this.setState({
                    data: rs.data,
                    fetching: false
                });
                if (this.state.value) {
                    this.handleChange(this.state.value);
                }
            })
            .catch((error) => {});
    }

    render() {
        const {filterData,data,value,fetching} = this.state;
        const options = [];
        const selectData = filterData ? filterData : data;
        if(selectData){
            selectData.map(d =>{
                options.push(<Option key={d.shopcode}>{d.shopcode + "-" + d.shopname}</Option>);
            });
        }
        return (
            <Select
        value={value}
        notFoundContent={fetching ? <Spin size="small"/> : '暂无数据'}
        filterOption={(inputValue, option) => option.key.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0}
        onChange={this.handleChange}
        style={{width: '100%'}}
        showSearch={true}
        disabled={this.props.disabled}
        mode={this.props.mode}
        placeholder={this.props.placeholder}
        maxTagCount={this.props.maxTagCount}
        allowClear={this.props.allowClear}
        loading={true}
            >
            {options}
            </Select>
    );
    }
}

export default SiteCompanySelect;